<template>
	<view>
		<view class="upload cu-form-group padding-lr-bj">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(vo, key) in imgList" :key="key" @tap="viewImage(key)">
					<image :src="$wanlshop.oss(vo, 40,40)" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="delImg(key)"><text class="wlIcon-31guanbi"></text></view>
				</view>
				<view class="solids" @tap="chooseImage">
					<!-- <text class="wlIcon-tupian1"></text> -->
					<image class="solids_img" src="/static/images/home/camer_home.png" mode=""></image>
					<view class="">
						
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">
			确认
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList:[],
			}
		},
		methods: {
			async chooseImage(index) {
				//#ifdef APP-PLUS				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')					console.log(result)				if (result !== 1) return
				this.$store.state.isCAMERA = true				// #endif
				
				let t = this
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: res => {
						let tempFilePaths= res.tempFilePaths
						this.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: tempFilePaths[i],
										success: image => {
											this.$api.upload({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.storage == 'local' ? null : updata.multipart,
												success: data => {
													let datainfo = JSON.parse(data)
													this.imgList.push(datainfo.data.fullurl);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			viewImage(key) {
				uni.previewImage({
					urls: this.imgList,
					current: this.imgList[key]
				});
			},
			delImg(key) {
				this.imgList.splice(key, 1);
			}, 
			submit(){
				uni.$emit('imageList',this.imgList)
				uni.navigateBack()
			}
		}
	}
</script>

<style>
page{
	background-color: #fff;
}
.btn{
	width: 700rpx;
	height: 96rpx;
	border-radius: 128rpx;
	background: var(--Style, linear-gradient(180deg, #E46C30 0%, #E32C1C 100%));
	position: fixed;
	bottom: 100rpx;
	left: 25rpx;
	color: #FFF;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 30rpx;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	line-height: 96rpx;
}

.solids_img{
	width: 59rpx;
	height: 59rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
</style>
